<script setup lang="ts">

import {onMounted, ref} from "vue";
import {getRespondentById} from "@/axios/respondent/respondentReq";

import useRespondentStore from "@/stores/respondent";
import {CaretBottom, SwitchButton, User} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter()

const respondentStore = useRespondentStore();

const respondentName = ref("")
onMounted(() => {
	getRespondentById(respondentStore.id).then(res => {
		respondentName.value = res.name;
	})
})

const logout = () => {
	router.push('/login')
}

</script>

<template>
	<el-header>
		<div>用户：<strong>{{ respondentName }}</strong></div>
		<!-- 下拉菜单 -->
		<!-- command: 点击下拉菜单项后触发的事件，在事件函数上可以声明一个函数，接收条目对应的指令 -->
		<el-dropdown placement="bottom-end">
			<span class="el-dropdown__box">
				{{respondentName}}
				<el-icon>
					<CaretBottom/>
				</el-icon>
			</span>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="info" :icon="User" @click="router.push('/respondent/profile')">基本资料</el-dropdown-item>
					<el-dropdown-item command="logout" :icon="SwitchButton" @click="logout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</el-header>
</template>

<style scoped lang="css">
.header {
	width: 100%;
	height: 100px;
	margin-left: 10px;
	margin-top: 10px;
}

.title {
	font-size: large;

}

.el-header {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>